<template>
  <!-- <div v-if="!showTest">
    <button @click="$router.push({ path: '/guide' })">跳转引导页</button>
    <a-button @click="(show = !show) && (current = 0)">开启操作提示</a-button>
  </div> -->
  <test v-if="showTest" />
  <Row :gutter="12" v-if="!showTest">
    <Col :span="24" style="margin-bottom: 12px">
      <GrowCard :loading="growCardData.loading" ref="step1" :overviewData="growCardData" />
    </Col>

    <Col :span="8" class="w-full">
      <Card :title="t('deviceStateDistribution')" :loading="deviceStateData.loading">
        <DeviceState :overviewData="deviceStateData" ref="step2" />
      </Card>
    </Col>
    <Col :span="16" style="margin-bottom: 12px">
      <Card :title="t('assetStateDistribution')" :loading="assetStateData.loading">
        <AssetState :overviewData="assetStateData" ref="step3" />
      </Card>
    </Col>

    <Col :span="24">
      <Card :title="t('onlineDevices')" :loading="deviceOnlineData.loading">
        <DeviceOnline :overviewData="deviceOnlineData" ref="step4" height="265px" />
      </Card>
    </Col>
  </Row>
</template>

<script lang="ts" setup name="dashboard-analysis">
  import { reactive, ref, h } from 'vue';
  import GrowCard from './components/GrowCard.vue';
  import { Card, Row, Col } from 'ant-design-vue';
  import AssetState from './components/AssetState.vue';
  import DeviceState from './components/DeviceState.vue';
  import DeviceOnline from './components/DeviceOnline.vue';

  import { queryAssertsAmount, queryDeviceStatus, getAssetStateLineData, getDeviceStateBarData, getDeviceStateLineData } from './api';
  import type { growCardDataType, deviceStateDataType, assetStateDataType, deviceOnlineDataType } from './api';
  import { useI18n } from '/@/hooks/web/useI18n';
  const showTest = ref(false);

  import test from './test.vue';

  const step1 = ref();
  const step2 = ref();
  const step3 = ref();
  const step4 = ref();
  const { t } = useI18n('dashboard');
  const growCardData: growCardDataType = reactive({ loading: true });
  Promise.all([queryAssertsAmount(), queryDeviceStatus()]).then(([res1, res2]) => {
    Object.assign(growCardData, res1, res2);
    growCardData.loading = false;
  });
  const assetStateData: assetStateDataType = reactive({ loading: true });
  getAssetStateLineData().then((res) => {
    assetStateData.useStateNameList = res.xAxis;
    assetStateData.useStateCountList = res.onlineData;
    assetStateData.loading = false;
  });

  const deviceStateData: deviceStateDataType = reactive({ loading: true });
  getDeviceStateBarData().then((res) => {
    deviceStateData.deviceStateCountList = res.data;
    deviceStateData.deviceStateNameList = res.xAxis;
    deviceStateData.loading = false;
  });
  const deviceOnlineData: deviceOnlineDataType = reactive({ loading: true });
  getDeviceStateLineData().then((res) => {
    deviceOnlineData.deviceTimeList = res.xAxis;
    deviceOnlineData.deviceOfflineList = res.offlineData;
    deviceOnlineData.deviceOnlineList = res.onlineData;
    deviceOnlineData.loading = false;
  });
</script>
<style scoped>
  .ant-row {
    padding: 12px;
  }
  :deep(.ant-card-head-title) {
    padding: 10px 0px;
  }
  :deep(.ant-card-head) {
    padding: 0 16px;
  }
  :deep(.ant-card-body) {
    padding: 12px;
    .ant-skeleton {
      height: 210px !important;
    }
  }
</style>
